<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="status_bar"></view>
			</template>
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
				<image :src="item.headPicUrl" mode="aspectFill"></image>
				<view class="content">
					<view class="nick">
						<view>{{item.nick}}</view>
						<image v-if="item.sex == 2" mode="scaleToFill"style="width:20rpx; height: 20rpx; margin-left: 10rpx;" :src="getImageUrl('sex_girl.png')"></image>
						<image v-if="item.sex == 1" mode="scaleToFill"style="width:20rpx; height: 20rpx; margin-left: 10rpx;" :src="getImageUrl('sex_boy.png')"></image>
					</view>
					<view>
						<text class="title">{{item.genius}}</text>
					</view>
					<text class="sub-title">{{item.sign}}</text>
					<view class="bottom">
						<view class="bottom-item">
							<view>
								<text class="big">{{item.score}}</text>分
							</view>
							<view style="color: #9097C7;">最近服务1人</view>
						</view>
						<view class="bottom-item">
							<view>
								<text class="big">{{item.money}}</text>/景点
							</view>
							<view style="color: #9097C7;">每小时</view>
						</view>
					</view>
				</view>
			</view>
			
			<template #bottom>
				<image :src="getImageUrl('ic_release.png')" class="release" @click="toRelease"></image>
			</template>
		</z-paging>
		
	</view>

</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil';
	export default {
		data() {
			return {
				dataList: [],
			};
		},
		methods: {
			async queryList(pageNo, pageSize) {
				const params = {
					pageNo: pageNo,
				}
				uni.$http.get("/api/apiAppTrip/getAppTripList", params)
					.then(res => {
						this.$refs.paging.complete(res.data);
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
			},
			itemClick(item){
				RouteUtil.toGameDetail(item)
			},
			toRelease(){
				RouteUtil.toGameRelease()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.release{
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		z-index: 99;
	}

	.item {
		display: flex;
		flex-direction: row;
		width: 100wh;
		box-sizing: border-box;
		background-color: white;
		border-radius: 10rpx;
		margin: 20rpx;
		padding: 20rpx;
		align-items: center;

		image {
			width: 260rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.nick {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				color: #222;
			}

			.title {
				display: inline;
				background-image: linear-gradient(to right, #ffedd5, #fdd0a2);
				border-radius: 10rpx;
				padding: 10rpx 10rpx;
				font-size: 15rpx;
				color: #E7166B;
				margin-top: 15rpx;
			}

			.sub-title {
				font-size: 15rpx;
				color: #888;
				margin-top: 15rpx;
			}

			.bottom {
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;

				.bottom-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: rgba(200, 205, 220, 0.5);
					border-radius: 10rpx;
					padding: 10rpx;
					margin-right: 20rpx;
					font-size: 12rpx;
					color: #222;

					.big {
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>